<template>
	<view class="page-all">
		<Header :title="isExamine ? '整改审核' : isReview ? '复查' : '查看'" bgColor="#fff" :leftIconsize="0"></Header>
		<view class="top-tab">
			<view v-for="(item, index) in tabName" :key="index" @click="checkTab(item.value)">
				<view :class="state.count == item.value ? 'action' : 'noAction'" class="label">{{ item.name }}</view>
				<uv-line class="line" v-if="index != tabName.length - 1" color="#C0C4CC" dashed
					:length="selsetValue == 0 ? 133 : selsetValue == 1 ? 55 : 22" :dashed="false"></uv-line>
			</view>
		</view>
		<!-- 基本信息 -->
		<view v-if="state.count == 0">
			<basicInformation></basicInformation>
		</view>
		<!--检查信息 -->
		<view v-if="state.count == 1">
			<checkTheInformation></checkTheInformation>
		</view>
		<!-- 整改信息 -->
		<view v-if="state.count == 2">
			<rectificationInformation :isExamine="isExamine" :showShenInformation="showShenInformation">
			</rectificationInformation>
		</view>
		<!-- 复查信息 -->
		<view v-if="state.count == 3">
			<reviewTheInformation :isReview="isReview" :isShowReview="isShowReview"></reviewTheInformation>
		</view>
	</view>
</template>

<script setup>
import basicInformation from './basicInformation.vue';
import checkTheInformation from './checkTheInformation.vue';
import rectificationInformation from './rectificationInformation';
import reviewTheInformation from './reviewTheInformation';
import { reactive, ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
const state = reactive({ count: 0 });
const tabName = ref();
// 是否显示审核结果信息
const isExamine = ref(false);
// 是否显示复查结果信息
const isReview = ref(false);
// 是否显示复查信息
const isShowReview =ref(false)
let data = [
	{ name: '基本信息', value: 0 },
	{ name: '检查信息', value: 1 },
	{ name: '整改信息', value: 2 },
	{ name: '复查信息', value: 3 }
];
const selsetValue = ref();
const showShenInformation = ref(false)
onLoad((option) => {
	let obj = JSON.parse(decodeURIComponent(option.data));
	selsetValue.value = obj.value;
	// 根据传过来值判断是否显示审核信息
	showShenInformation.value = obj.showShenInformation
	// 根据传过来值判断是否显示复查信息
	isShowReview.value = obj.isShowReview
	// 待上传检查记录单查看详情2个tab
	if (selsetValue.value == 0) {
		tabName.value = reactive(data.slice(0, 2));
		// 待审核与待复查查看详情3个tab
	} else if (selsetValue.value == 1) {
		tabName.value = reactive(data.slice(0, 3));
		// 是否显示审核结果与审核信息
		isExamine.value = obj.isExamine;

	} else {
		tabName.value = reactive(data);
		// 是否显示复查结果
		isReview.value = obj.isReview;

	}

	// 待复查页面查看详情默认选中整改信息
	if (obj.selsetThreeTab) {
		checkTab(2);
	} else if (obj.selsetFourTab) {
		checkTab(3);
	} else {
		checkTab(0);
	}
});

// tab选择
const checkTab = (label) => {
	state.count = label;
};
</script>

<style lang="scss" scoped>
@import '@/static/css/dailycheck/viewIndex.scss';

::v-deep.uv-textarea__field {
	text-align: left !important;
	padding: 10rpx;
}

::v-deep .speech-main {
	.content {
		.uv-textarea__field {
			text-align: left !important;
			height: 400px !important;
		}

		.uv-border {
			border: 0 !important;
		}
	}
}

.top-tab {
	display: flex;
	justify-content: center;
	line-height: 50rpx;

	&>view {
		display: flex;

		.label {
			margin-top: 30rpx;
			padding: 0 18rpx;
			font-size: 28rpx;
			color: #767676;

			&.action {
				color: #0256ff;
			}
		}

		.line {
			margin-top: -20rpx;
		}
	}
}
</style>
